<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Shadow DOM</title>
    <style type="text/css">
        .shadowroot_son {
            color: #f00;
        }
    </style>
</head>

<body>
    <p class="shadowroot_son">我不在 Shadow Host内</p>
    <div class="shadowhost">Hello, world!</div>
    <script>
        // 影子宿主（shadow host）
        // var shadowHost = document.querySelector('.shadowhost');
        // 创建影子根（shadow root）
        // var shadowRoot = shadowHost.createShadowRoot();
        // 影子根作为影子树的第一个节点，其他的节点比如p节点都是它的子节点。
        // shadowRoot.innerHTML = '<p class="shadowroot_son">我在 Shadow Host内</p>';

        var shadowHost = document.querySelector('.shadowhost');
        var child = document.createElement("p");
        child.innerHTML = '<p class="shadowroot_son">我在 Shadow Host内</p>';
        var shadowRoot = shadowHost.appendChild(child)

    </script>
</body>
<html>